<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <style></style>
</head>
<body>
  <h1>用户列表</h1>
  <hr>
  <a href="./query.html">查询单一用户</a>
  <table border="2">
    <thead>
      <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>电话号码</th>
        <th>是否会员</th>
      </tr>
    </thead>
    <tbody id="box">
    </tbody>
  </table>
  <script>
    //1获取元素
    var box = document.getElementById('box');
    //调用ajax
    ajax();
    //创建ajax函数
    function ajax(){
      var xhr = new XMLHttpRequest();
      //监听并返回值
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
          if(xhr.status>=200&xhr.status<300){
            var result = JSON.parse(xhr.responseText)
            //console.log(xhr.responseText);
            //要小心我只需要对象中的一个数组，不是想要整个对象，因此我只需要result.data
            show(result.data)
          }
        }
      }
      xhr.open('get','/admin/search',true)
      xhr.send();
    }
    //show 函数，为了遍历显示数据插入到某元素中
    //套路1创建一个对象
    function show(arr){
      //套路2创建一个空字符串，用于累计标签
      var str='';
      //套路3 for循环
      for(var i=0;i<arr.length;i++){
        str+=`
        <tr>
        <td>${arr[i].u_id}</td>
        <td>${arr[i].u_names}</td>
        <td>${arr[i].u_phone}</td>
        <td>${arr[i].u_member}</td>
        <td><button onclick=del(${arr[i].u_id})>删除</button></td>
      </tr>`
      
      }
      box.innerHTML = str
    }
    //删除的ajax调用，参数为需要删除的数据id
    function del(id){
      var xhr = new XMLHttpRequest();
      //
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
          if(xhr.status>=200 && xhr.status<300){
            console.log(xhr.responseText)
            var result = JSON.parse(xhr.responseText);
            //console.log(result)
            alert(result.msg)
            if(result.code==1){
              //刷新页面，再调用一下ajax
              ajax();
            }
          }
        }
      }
      xhr.open('delete',`/admin/del/${id}`,true);
      xhr.send();
    }
  </script>
</body>
</html>